<template>
    <el-main>
        <div class="row mb-1">
            <div class="col">
                <el-input placeholder="请输入内容">
                </el-input>
            </div>
        </div>
        <div class="row mb-1">
            <div class="col">
                <el-button @click="start" type="primary">
                    查询
                </el-button>
            </div>
        </div>
        <div class="row mb-1">
            <div class="col">
                <el-table :data="tabledata" border height="65vh" style="width: 100%">
                    <el-table-column prop="ID" label="ID">
                    </el-table-column>
                    <el-table-column prop="name" label="name"></el-table-column>
                    <el-table-column prop="paixu" label="排序" sortable>
                    </el-table-column>
                    <el-table-column label="操作" width="230">
                        <template #default="scope">
                            <router-link :to="{ name: '课程', params: { ID: scope.row.ID } }" v-slot="{ navigate }" custom>
                                <el-button @click="navigate" type="info">
                                    查看
                                </el-button>
                            </router-link>
                            <el-button @click="update(scope.row)" type="warning">修改</el-button>
                            <el-button type="danger" @click="delteamuser(scope.row.ID)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </el-main>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { toLocaleDateString } from "../../../util/time";
import { asyncadmindelteamuser, asyncmiaoadminselectcourse, asyncmiaoadminselectcatebag, asyncmiaoadmincreatedorupdatecoursecatebag } from "../../../api/index";
import Alymodel from "../../../mysql_interface/model";
const p = defineProps<{ ID: number }>()

const _tableData = ref<Alymodel.IMcourse[]>([]);
const IID = ref(0);
const ID = computed<number>(() => {
    return Number(p.ID);
});

const tabledata = computed(() => {
    return catebag.value?.coursecatebag.map(e => {
        const data = _tableData.value.find(a => a.ID === e.cid)
        return {
            ...e,
            name: data?.name,
            paixu: e?.paixu || data?.paixu || 0,
        }
    }).sort((a, b) => a.paixu - b.paixu)
})

const adduserview = ref();


onMounted(() => {
    start();
});

watch(
    () => ID,
    () => {
        start();
    }
);

const catebag = ref<Alymodel.IMcatebag>()

async function start() {
    if (ID.value) {
        const _data = await asyncmiaoadminselectcatebag({
            ID: ID.value
        })
        catebag.value = _data.rows[0]
        const data = await asyncmiaoadminselectcourse({ ID: catebag.value.coursecatebag.map(e => e.cid) });
        _tableData.value = data.rows;
    } else {
        ElMessage.error("没有课程组");
    }
}



function update(data: Alymodel.IMcoursecatebag) {
    ElMessageBox.prompt('请修改排序', '提示', {
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel',
    })
        .then(async ({ value }) => {
            asyncmiaoadmincreatedorupdatecoursecatebag({
                ...data,
                paixu: Number(value)
            }).then(() => {
                start()
                ElMessage.success('提交成功')
            })
        })
        .catch(() => {

        })
}



async function delteamuser(ID: number) {
    ElMessageBox.confirm("是否删除此团员？", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(() => {
            asyncadmindelteamuser({ ID })
                .then(() => {
                    ElMessage.success("删除成功");
                    start();
                })
                .catch((e) => {
                    ElMessage.error("删除失败" + e);
                });
        })
        .catch(() => { });
}


</script>
